<template>
  <div id="car-management-home">
    <div class="controls-group">
      <el-button
        icon="el-icon-plus"
        type="primary"
        @click="handleBtnAddClick"
      >录入新车辆
      </el-button>
      <!--      <el-button-->
      <!--        icon="el-icon-delete"-->
      <!--        type="danger"-->
      <!--        :disabled="multipleSelection.length === 0"-->
      <!--        @click="handleBtnMultiDeleteClick"-->
      <!--      >删除选中车辆信息-->
      <!--      </el-button>-->
    </div>

    <div class="table-con">
      <el-table
        border
        height="90%"
        size="small"
        :data="tableData"
        @selection-change="handleSelectionChange"
      >
        <!--      <el-table-column-->
        <!--        align="center"-->
        <!--        type="selection"-->
        <!--        width="55"-->
        <!--      />-->
        <el-table-column
          align="center"
          label="车辆名称"
          prop="name"
        />
        <el-table-column
          align="center"
          label="车辆型号"
          prop="unit_type"
        />
        <el-table-column
          align="center"
          label="空车质量（KG）"
          prop="empty_quality"
        />
        <el-table-column
          align="center"
          label="满载总重（KG）"
          prop="full_payload_weight"
        />
        <el-table-column
          align="center"
          label="最高车速（KM/H）"
          prop="max_speed"
        />
        <el-table-column
          align="center"
          label="最小转弯半径（M）"
          prop="min_turning_radius"
        />
        <el-table-column
          align="center"
          label="全长（mm）"
          prop="overall_length"
        />
        <el-table-column
          align="center"
          label="总宽（mm）"
          prop="overall_width"
        />
        <el-table-column
          align="center"
          label="空载高度（mm）"
          prop="noload_height"
        />
        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          width="160"
        >
          <template v-slot="scope">
            <el-button type="warning" @click="handleBtnEditClick(scope.row)">编辑</el-button>
            <el-button type="danger" @click="handleBtnDeleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="sizes, total, prev, pager, next"
        style="margin-top: 12px;"
        :current-page="pageParams.page"
        :total="count"
        :page-size="pageParams.page_size"
      />
    </div>

    <car-adder
      ref="car-adder"
      @success="handleCarAdderSuccess"
    />
  </div>
</template>

<script>
import commonElTableMixin from '@/mixins/common-el-table-mixin'
import CarAdder from '@/views/management/car-management/CarAdder'
import GengElCommonConfirm from '@/components/geng-el-components/GengElCommonConfirm'

export default {
  name: "CarManagementHome",
  components: {GengElCommonConfirm, CarAdder},
  mixins: [commonElTableMixin],

  data() {
    return {
      tableData: [
        {
          "id": 3,
          "add_time": "2022-10-07 20:46:09",
          "update_time": "2022-10-07 20:46:09",
          "name": "东风加长版EQ1118GA1型运兵车",
          "unit_type": "EQ1118GA1",
          "empty_quality": 8510.0,
          "full_payload_weight": 11010.0,
          "max_speed": 90.0,
          "min_turning_radius": 20.0,
          "overall_length": 10470.0,
          "overall_width": 2470.0,
          "noload_height": 2795.0
        }
      ]
    }
  },

  methods: {
    handleBtnAddClick() {
      this.$refs['car-adder'].isShow = true
    },

    handleBtnMultiDeleteClick() {

    },

    handleBtnEditClick(data) {
      //
    },

    handleBtnDeleteClick(data) {
      this.$confirm('是否永久删除该车辆信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //
      })
    },

    handleCarAdderSuccess() {

    }
  }
}
</script>

<style scoped lang="scss">
#car-management-home {
  .controls-group {
    padding: 14px 0;
  }
}
</style>